@import '../../common/scss/base.scss';
page{
  background-color: $theme-color;
  .pay-sure{
    background-color: #ffffff;
    font-family:PingFangSC-Regular;
    font-weight:400;
    .pay-sure-title{
      width: 100%;
      text-align: center;
      padding-top: 60rpx;
      image{
        width: 120rpx;
        height: 120rpx;
      }
      .pay-text {
        font-size:40rpx;
        color:#000000;
        line-height:56rpx;
        margin-top: 40rpx;
      }
    }
    .pay-sure-btn{
      text-align: center;
      padding: 60rpx 0 46rpx;
      view{
        border-radius: 10rpx;
        border: 2rpx solid #888888;
        text-align: center;
        line-height: 72rpx;
        display: inline-block;
        font-size:28rpx;
        color:#353535;
        line-height:40rpx;
        padding: 16rpx 50rpx;
        &:last-child{
          margin-left: 60rpx;
        }
      }
    }
  }
  .show-mask{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    animation: zoomIn 0.5s;
    .cancel-img{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 50rpx;
      margin: 0 auto;
      font-size: 72rpx;
      color: #ffffff;
    }
    @keyframes zoomIn {
      from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
      }
      50% {
        opacity: 1;
      }
    }
    .toast-img{
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 630rpx;
      height: 868rpx;
    }
    .mask-content{
      position: relative;
      padding: 87rpx 60rpx;
      width: 630rpx;
      height: 868rpx;
      text-align:center;
      .mask-title{
        .mask-text{
          font-size: 32rpx;
        }
        .mask-icon{
          font-size: 30rpx;
          color: #CF1F1F;
        }
        .mask-money{
          font-size: 35rpx;
          color: #CF1F1F;
          margin-right: 10rpx;
          font-weight: 500;
        }
      }
      .mask-spec{
        color: #9B9B9B;
        font-size: 24rpx;
        margin-top: 16rpx;
      }
      .mask-tip{
        font-size: 32rpx;
        margin-top: 90rpx;
      }
      .mask-show-money{
        color: #CF1F1F;
        margin-top: 28rpx;
        text {
          &:first-child{
            font-size: 46rpx;
            font-weight: 500;
          }
          &:nth-child(2){
            font-size: 30rpx;
          }
          &:last-child{
            font-size: 50rpx;
            font-weight: 500;
          }
        }
      }
      .share-btn{
        position: absolute;
        bottom: 330rpx;
        left: 0;
        right: 0;
        margin: 0 auto;
        color: #4D1F03;
        font-size: 32rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;        
      }
      .mask-explain{
        position: absolute;
        bottom: 239rpx;
        left: 0;
        right: 0;
        margin-left:-19rpx;
        color: #FDDDBB;
        font-size: 24rpx;
      }
    }
  }
  .show-image{
    margin-top: 20rpx;
    position: relative;
    image{
      width: 750rpx;
      height: 266rpx;
    }
  }
}